import { useLayoutStore } from '@/store/Layout'
import dark from '@/assets/theme/echarts_dark.json'
import * as echarts from 'echarts/core'
export const useGetEchart = (id: string): echarts.ECharts => {
  const store = useLayoutStore()
  const { theme } = storeToRefs(store)
  const myChart = computed<echarts.ECharts>(() => {
    const chartDom = document.getElementById(id)!
    if (chartDom.hasAttribute('_echarts_instance_')) chartDom.removeAttribute('_echarts_instance_')
    let Chart: echarts.ECharts | null = null
    if (theme.value.isDark) {
      echarts.registerTheme('purple-passion', dark)
      Chart = echarts.init(chartDom, 'purple-passion')
    } else {
      Chart = echarts.init(chartDom)
    }
    window.addEventListener('resize', () => {
      Chart!.resize()
    })
    return Chart
  })
  return myChart.value
}
